<template>
  <div class="setting-component">
    <div class="setting-container">
      <!-- 顶部Tabs 标签页组件 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="角色管理" name="first" />
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>

      <!-- 新增角色按钮 -->
      <el-button class="addUserBtn" type="primary" size="small" plain @click="addNewUser('add')">新增角色</el-button>

      <!-- table 表格组件 -->
      <el-table
        class="setting-table"
        :data="tableData"
        stripe
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
        />
        <el-table-column
          prop="name"
          label="角色"
          width="100"
        />
        <el-table-column
          prop="description"
          label="描述"
        />
        <el-table-column
          label="操作"
          width="235"
        >
          <template slot-scope="scoped">
            <el-button type="primary" size="mini" plain>分配权限</el-button>
            <el-button type="success" size="mini" plain @click="editUser(scoped.row)">编辑</el-button>
            <el-button type="warning" size="mini" plain @click="deleteUser(scoped.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 新增角色 弹出模态框 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="50%"
        @close="handleClose"
      >
        <!-- 添加 / 编辑 模态框 -->
        <el-form ref="formRef" :model="userForm" :rules="rules" label-width="80px">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="userForm.name" />
          </el-form-item>
          <el-form-item label="角色描述" prop="description">
            <el-input v-model="userForm.description" />
          </el-form-item>
          <el-form-item class="btn-bottom">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 底部 分页 组件 -->
      <el-pagination
        class="setting-page"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageForm.pagesize"
        layout="total, prev, pager, next, sizes, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getAllUserListRequest, addUserAtSettingRequest, updateUserByIdRequest, deleteUserByIdRequest } from '@/api/setting'
import _ from 'lodash'
export default {
  data() {
    return {
      activeName: 'first',
      // 初始化表格组件数据
      tableData: [],
      // 要跳转的页数
      currentPage: 1,
      // 控制对话框显示隐藏
      dialogVisible: false,
      // 判断是否为编辑
      isEdit: false,
      // 分页组件数据
      pageForm: {
        page: 1, // 当前页
        pagesize: 10 // 每页多少条数据
      },
      // 当前点击项的 id
      currentId: '',
      // 总页数
      total: 0,
      // 初始化表单数据
      userForm: {
        name: '',
        description: ''
      },
      // 定义校验规则
      rules: {
        name: [
          { required: true, message: '请输入角色名称后再提交', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入角色描述后再提交', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 最大页码值
    maxPage() {
      return Math.ceil(this.total / this.pageForm.pagesize)
    },
    // 是否是最后一页
    isLastPage() {
      return this.total % this.pageForm.pagesize === 0
    }
  },
  created() {
    this.getAllUserList() // 发送请求渲染页面
  },
  methods: {
    // ^ ==================== 请求 ====================
    // 请求 - 获取所有角色列表
    async getAllUserList() {
      try {
        const res = await getAllUserListRequest(this.pageForm)
        if (res.success) {
          this.tableData = res.data.rows
          this.total = res.data.total
        } else {
          console.log(res.message || '获取所有角色列表失败!')
        }
      } catch (error) {
        console.log('获取所有角色列表失败!', error)
      }
    },
    // 请求 - 添加角色
    async addUserAtSetting() {
      try {
        const res = await addUserAtSettingRequest(this.userForm)
        if (res.success) {
          this.$message.success('添加角色成功!')
          // 分页优化
          if (this.isLastPage) { // 如果最后一页填满了, 就跳到最后一页, 如果没有填满, 就将当前页+1后跳转
            this.total++
            this.pageForm.page = this.maxPage + 1
          } else {
            this.pageForm.page = this.maxPage
          }
          this.success()
        } else {
          this.$message.error(res.message || '添加角色失败!')
        }
      } catch (error) {
        console.log('添加角色失败!', error)
      }
    },
    // 请求 - 编辑角色
    async updateUserById() {
      try {
        const res = await updateUserByIdRequest(this.userForm)
        console.log(res)
        if (res.success) {
          this.$message.success('修改角色成功!')
          this.success() // 修改成功, 执行 success 事件
        } else {
          this.$message.error(res.message || '修改角色失败!')
        }
      } catch (error) {
        console.log('编辑角色失败', error)
      }
    },
    // 请求 - 删除角色
    async deleteUserById(id) {
      try {
        const res = await deleteUserByIdRequest(id)
        if (res.success) {
          this.$message.success('删除角色成功!')
          // 分页优化
          // 如果当前页面的数据只剩一个, 那么这个数据被删除之后, 就要让页面往回退一页, 也就是--
          // 如果当前页面数据没有了, 代表第一页最后一个数据被删了, 此时为了不让页码变为负数, 就赋值为 1
          if (this.tableData.length === 1) {
            this.pageForm.page--
            if (this.tableData.length <= 0) this.pageForm.page = 1
          }
          this.getAllUserList()
        } else {
          this.$message.error(res.message || '删除角色失败!')
        }
      } catch (error) {
        console.log('删除角色失败!', error)
      }
    },
    // ^ ==================== 事件 ====================
    // 事件 - tabs 标签页组件标题点击事件
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 事件 - 分页组件: 页面编号点击事件
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pageForm.page = val
      this.getAllUserList()
    },
    // 事件 - 分页组件: 切换页面箭头点击事件
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.pageForm.page = val
      this.getAllUserList()
    },
    // 事件 - 添加按钮点击事件
    addNewUser() {
      this.dialogVisible = true
      this.isEdit = false
    },
    // 编辑按钮点击事件
    editUser(value) {
      this.dialogVisible = true
      this.isEdit = true
      this.userForm = _.cloneDeep(value)
    },
    // 事件- 删除角色按钮点击事件
    deleteUser(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteUserById(id)
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 事件 - 操作成功后, 关闭模态框, 重新渲染页面
    success() {
      this.dialogVisible = false
      this.getAllUserList()
    },
    // 事件 - 提交按钮点击事件
    onSubmit() {
      // 兜底校验
      this.$refs.formRef.validate(val => {
        if (!val) return this.$message.warning('请输入正确内容后再提交!')
        if (this.isEdit) {
          this.updateUserById() // 编辑
        } else {
          this.addUserAtSetting() // 新增
        }
      })
    },
    // 模态框关闭事件
    handleClose() {
      this.$refs.formRef.resetFields() // 重置表单校验结果
      if (this.isEdit) this.userForm = this.$options.data().userForm // 重置表单数据
    }
  }
}
</script>

<style lang="scss" scoped>
// tabs 标签页样式
.setting-container {
  border: 3px solid #e0e0e0;
  padding: 20px;
}

// 新增角色按钮样式
.addUserBtn {
  margin-top: 15px !important;
}

// 表格组件样式
.setting-table {
  margin-top: 15px !important;
}

// 分页组件样式
.setting-page {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

// 底部按钮
.btn-bottom {
  margin-top: 25px;
  text-align: right;
}
</style>
